import Title from '../Title';
import { Space } from 'antd';
import dayjs from 'dayjs';
import { useAuthStore } from '@/app/cg06/store/useAuthStore';
import useSWR from 'swr';
import { getSeawayApi } from '@/app/cg06/api/supplyChainNetwork';
import SeawatLineChart from './SeawayLineChart';
import styles from '../../pages.module.scss';
import { px2vw, px2vh, responsive } from '@/app/cg06/utils/responsive'; 
export function SeawayChart() {
	const token = useAuthStore(s => s.token);
	const { data } = useSWR(token ? 'getSeawayApi' : null, getSeawayApi);
  // 同比数据，如果出运量大于去年同期，显示在上方，否则显示在下方，只展示 大于 0  的数据( value 是 null 的数据线 不会连在一起 )
  const YOYData = data?.xyObjList?.map((n) => ({value: [n.x, Number(n.z) > 0 ? Number(n.z) : null], label: {position: n.z && Number(n.z) > Number(n.y) ? "top" : "bottom"}})) || [];

	return (
    <Space
      style={{
        padding: px2vh(24) + ' ' + px2vw(2) + ' ' + px2vh(24) + ' ' + px2vw(24),
        borderRadius: 16,
        flex: 1,
        marginRight: px2vw(6),
      }}
      direction="vertical"
      className={styles.spaceWrap}
      size={10}
    >
      <Title subTitle="单位:TEU" title="近 12 月海运出运量趋势" />
      <div
        style={{
          width: px2vw(410),
          height: px2vh(335),
          marginLeft: px2vw(-20),
          marginTop: px2vw(-35),
        }}
      >
        <SeawatLineChart
          labels={data?.monthList || []}
          dataset={[
            {
              data:
                data?.xyObjList?.map((n, index) => {
                  // if (index === data?.xyObjList.length - 1) {
                  //   n.y = '10724'
                  // }
                  return {
                  value: [n.x, n.y],
                  label: {
                    position:
                      !n.z || Number(n.y) > Number(n.z) ? "top" : "bottom",
                  },
                }
                }) || [],
              label: "出运量",
              areaTopColor: "rgba(89,169,235,0.52)",
              labelColor: "RGBA(71, 176, 250, 1)",
              lineStyle: "RGBA(68, 171, 242, 1)",
            },
            {
              data: YOYData,
              label: "同比",
              areaTopColor: "#C1BDD5",
              labelColor: "#C1BDD5",
              lineStyle: "#C1BDD5",
            },
          ]}
        />
      </div>
    </Space>
  );
}

